<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到排名界面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
    <center>
        <table class="ta" border="1" >
            <tr>
                <th>姓名：</th>
                    <th>成绩：</th>
                     </tr>
            
           </table>
           <div class="di">
            <button class="syy">上一页</button>
            <div>本页是：<span class="benye"></span></div>
            <button class="xyy">下一页</button>
           </div>
           
    </center>
   
</body>
<style>
    .ta{
        width: 300px;
        text-align: center;
    }
    .syy,.xyy{
        width: 60px;
        height: 20px;
        margin-top: 10px;
        text-align: center;
    }
    .di{
        width: 300px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
</style>
<script>
     $(document).ready(function(){
        let page=1;  
       
        $.ajax({
            url:"/paiming?page="+page+"",
            method:"get",
            dataType:"json",
            success:function(data){
                //console.log(data)
                let ta=document.getElementsByClassName('ta')[0];
                let syy=document.getElementsByClassName('syy')[0];
                let xyy=document.getElementsByClassName('xyy')[0];
                let benye=document.getElementsByClassName('benye')[0];
                benye.innerHTML=page;
                //console.log(ta)
                for(let i=0;i<data.length;i++){
                    ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                    // console.log(data[i].name)
                    // console.log(data[i].sore)
                }
               
                syy.addEventListener('click',function(){
                    if(page>1){
                        page--;
                        $.ajax({
                        url:"/paiming?page="+(page)+"",
                        method:"get",
                        dataType:"json",
                        success:function(data){
                            ta.innerHTML=`<tr>
                        <th>姓名：</th>
                            <th>成绩：</th>
                             </tr>
                    <tr>`;
                            for(let i=0;i<data.length;i++){
                                ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                        }
                    }
                    })
                    }
                    benye.innerHTML=page;
                })
                xyy.addEventListener('click',function(){
                    page++;
                    $.ajax({
                        url:"/paiming?page="+(page)+"",
                        method:"get",
                        dataType:"json",
                        success:function(data){
                            ta.innerHTML=`<tr>
                        <th>姓名：</th>
                            <th>成绩：</th>
                             </tr>
                    <tr>`;
                            for(let i=0;i<data.length;i++){
                                ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                        }
                    }
                    })
                    benye.innerHTML=page;
                    //console.log(page)
                })
            }
           
        })
        console.log(page)
    })
</script>
</html>